<template>
  <InformationCard
    title="新增Edgex服务"
    class="relative transition-all transform cursor-pointer hover:scale-105"
    @click="showModal"
  >
    <template #extra>
      <a-button type="link" size="small"
        ><a-tag color="purple">+</a-tag></a-button
      ></template
    >
    <span
      class="flex-1 text-2xl leading-loose text-purple-600 truncate hover:text-purple-500"
    >
      点击新增Edgex服务
    </span>
    <IconFont type="icon-new" />
  </InformationCard>
  <a-modal
    title="新增Edgex服务"
    v-model:visible="visible"
    :confirm-loading="confirmLoading"
    width="800px"
    @ok="handleOk"
  >
    <AppendEdgexForm ref="form" />
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import InformationCard from "./InformationCard.vue";
import IconFont from "@/components/Icons";
import AppendEdgexForm from "../forms/AppendEdgexForm.vue";

export default defineComponent({
  name: "AppendEdgexCard",
  components: {
    InformationCard,
    IconFont,
    AppendEdgexForm,
  },
  setup() {
    const form = ref();
    const visible = ref<boolean>(false);
    const showModal = () => {
      visible.value = true;
    };
    const confirmLoading = ref<boolean>(false);
    const handleOk = async () => {
      confirmLoading.value = true;
      const ans = await form.value.onSubmit();
      if (ans) {
        visible.value = false;
      }
      confirmLoading.value = false;
    };
    return { form, visible, showModal, confirmLoading, handleOk };
  },
});
</script>

<style scoped lang="scss"></style>
